<template>
	<view class="container">
		<!--header-->
		<view class="tui-header-box" :style="{ height: CustomBar + 'px', background: 'rgba(255,255,255,' + opcity + ')' }">
			<view class="tui-header" :style="{ paddingTop: StatusBar + 'px', opacity: opcity }">商品详情</view>
			<view class="tui-header-icon" :style="{ marginTop: StatusBar + 'px' }">
				<view class="tui-icon-box" :style="{ backgroundColor: 'rgba(0, 0, 0,' + iconOpcity + ')' }" @tap="Route({type:'back'})" v-if="back">
					<text class="icon iconfont icon-tubiaozhizuo-" :class=" opcity >= 1 ? 'text-black' : 'text-white'"></text>
				</view>
				<view class="tui-icon-box" :style="{ backgroundColor: 'rgba(0, 0, 0,' + iconOpcity + ')' }" @tap="Route({type:'tab',url:'/pages/index/index'})" v-else>
					<text class="icon iconfont icon-shouye" :class=" opcity >= 1 ? 'text-black' : 'text-white'"></text>
				</view>
			</view>
			<!-- #ifdef H5 || APP-PLUS -->
			<view class="tui-header-right" :style="{top:'10px',marginTop: StatusBar + 'px' }">
				<view class="tui-icon-box tui-icon-ml" :style="{backgroundColor: 'rgba(0, 0, 0,' + iconOpcity + ')'}" @tap.stop="popup">
					<text class="icon iconfont icon-fenxiang text-bold" :class=" opcity >= 1 ? 'text-black' : 'text-white'"></text>
				</view>
			</view>
			<!-- #endif -->
		</view>
		<!--header-->
		<!--banner-->
		<view class="tui-skeleton">
		<view class="tui-banner-swiper tui-skeleton-fillet">
			<swiper :duration="150" class="swiperheight"
			 @change="bannerChange">
				<block v-for="(item, index) in goodDetail.whitePicture" :key="index">
					<swiper-item :data-index="index" @tap.stop="previewImage">
						<image :src="item" class="tui-slide-image swiperheight" />
					</swiper-item>
				</block>
			</swiper>
			<view class="tui-banner-tag">
				<view class="banner-tag-in">
					<view class="banner-tag round">
						{{ bannerIndex + 1 }}/{{ goodDetail.whitePicture?goodDetail.whitePicture.length:0 }}
					</view>
				</view>
			</view>
			<!-- 视频播放 -->
			<view v-if="goodDetail.videoSrc != ''">
				<view class="vedio-box" v-show="vedioShow">
					<video id="myVideo" :src="goodDetail.videoSrc" controls :enable-progress-gesture="false"></video>
				</view>
				<view @click="playRadio" class="playBtn u-f-ac" v-show="!vedioShow"><view class="round"><image src="https://sbb-sbb.oss-cn-shenzhen.aliyuncs.com/static/playbtn.png"></image></view><view>播放</view></view>
				<view @click="outRadio" class="outBtn" v-show="vedioShow">退出播放</view>
			</view>
		</view>
		<!--banner-->
		
		<view class="pro-detail">
			<!-- 价格模块 1-->
			<view class=" u-f-ac u-f-jsb tui-skeleton-fillet price-blue">
				<view class="price">
					<tpl-price :price="goodDetail.relation.productPrice || ''" :component="'color: #ffffff'" :integerStyle="'font-size: 42rpx;transform: translateY(5rpx);'"></tpl-price>
					<view class="line-through">
						￥{{goodDetail.relation.productPrice || ''}}
					</view>
				</view>
				<view class="banner-pricebox u-fc">
					<view>距抢购结束仅剩</view>
					<uni-countdown color="#fff" background-color="#2ba4f7" :show-day="false" :hour="12" :minute="12" :second="12"></uni-countdown>
				</view>
			</view>
			<view class="por-list">
				<view class="pro-titbox u-f-ajc">
					<view class="pro-title tui-skeleton-rect">{{goodDetail.productName}}</view>
					<button class="pro-button tui-skeleton-rect" open-type="share">
						分享
					</button>
				</view>
				<!-- 价格模块 2-->
				<view class="pro-pricebox u-f-jsb">
					<view class="tui-por-del">
						<view class="del-item del-item-blue">
							销量 {{goodDetail.relation.saleAmount}}
						</view>
						<view class="del-item del-item-red">赠送8积分</view>
					</view>
					<view class="u-f-jse food-btm">
						<cart-control :food="goodDetail" :carList='carList' @cartChange='handelCart'></cart-control>
					</view>
				</view>
				<view>
					<text class="productStock ml0 text-red" v-if="goodDetail.relation.productStock > 0 && goodDetail.relation.productStock < 11">（仅剩{{goodDetail.relation.productStock}}件）</text>
					<text class="productStock ml0 text-red" v-if="goodDetail.relation.productStock < 1">暂时缺货</text>
				</view>
			</view>
			<view class="por-list">
				<view class="">
					<view class="u-f-ac u-f-jsb">
						<view class="por-specs tui-skeleton-rect">
							<text>平台保障</text>
							<text class="text-glod flex1">闪电退款·支持七天无理由退货·价格保护</text>
						</view>
					</view>
					<view class="u-f-jsb margin-top-sm">
						<view class="por-specs tui-skeleton-rect u-f">
							<text>自提信息</text>
							<view class="flex1 texts-cut">{{pickUpPoint.pick_name || '请选择附近自提点'}},明天16点提货</view>
						</view>
					</view>
				</view>
			
			</view>
		</view>
		<!-- 详情strat -->
		<view class="product-details tui-skeleton-fillet bg-white">
			<view class="product-sku">
				<view class="details-title  u-f-ajc">
					<view></view>
					<text>商品规格</text>
					<view></view>
				</view>
				<view class="margin bg-white sku-box">
					<view class="u-f sku">
						<text class="bg-gray">产地</text>
						<text class="sku-detail">{{goodDetail.productPlace}}</text>
					</view>
					<view class="u-f sku">
						<text class="bg-gray">规格</text>
						<text class="sku-detail">{{goodDetail.skuName}}</text>
					</view>
					<view class="u-f sku">
						<text class="bg-gray">生产日期</text>
						<text class="sku-detail">{{goodDetail.produceTime | friendDate}}</text>
					</view>
					<view class="u-f sku">
						<text class="bg-gray">保质期</text>
						<text class="sku-detail">{{goodDetail.lifeTime}}{{goodDetail.lifeTimeUnit}}</text>
					</view>
					<view class="u-f sku">
						<text class="bg-gray">储存方式</text>
						<text class="sku-detail">{{goodDetail.storeCondition}}</text>
					</view>
				</view>
			</view>
			<view>
				<view class="details-title bg-white u-f-ajc">
					<view></view>
					<text>商品详情</text>
					<view></view>
				</view>
				<image v-for="item in goodDetail.detailPicture" :src="item" mode="widthFix"></image>
				<view></view>
			</view>
			
		</view>
		</view>
		<shop-cart v-if="carList.length" :goods="carList" @change='handelCart' @delAll="delAll" bottom='0px'></shop-cart>
		<!-- <shopcart v-if="carList.length" :discount="mydiscount" :goods="carList" @goorder="getorder" @goorderqr="geqrdd" @add="addCart" @dec="decreaseCart" @delAll="delAll"></shopcart> -->
		
	</view>
</template>

<script>
	import Vue from 'vue'
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				productId: '',
				pickUpPoint: {},	//自提点信息
				iconOpcity: 0.5,
				goodDetail: {relation:{}},
				bannerIndex: 0,
				banner: [],
				skeletonShow: true,
				// 控制视频是否播放
				vedioShow: false,
				opcity:0,
				back:true,
				carList:this.$store.state.carList
			}
		},
		async onLoad(options) {
			this.productId = options.productId
			this.getDetail()
			// #ifdef MP-WEIXIN
			setTimeout(()=>{
				wx.showShareMenu({
					withShareTicket:false,
					//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
					menus:["shareAppMessage"]
				})
			},1000)
			// #endif
			if(options.type) return this.back = false
		},
		onShow() {
			this.pickUpPoint = uni.getStorageSync('pickUpPoint')
			this.showCart()
		},
		//发送给朋友
		onShareAppMessage(res) {
			return {
				title: "秒杀价:" + this.goodDetail.relation.productPrice + '元购' + this.goodDetail.productName,
				type: 0,
				path: `pages/common/goodsDetail/goodsDetail?detail=${encodeURIComponent(JSON.stringify(this.goodDetail))}&relations=${encodeURIComponent(JSON.stringify(this.goodDetail.relation))}&type=1`,
				imageUrl: this.mainPicture,
			}
		},
		methods: {
			// 商品详情
			getDetail(){
				this.$http.post('api/search/products/queryById',{productId:this.productId}, { header: { authType: 'false'}}).then(res => {
					if(!res.success) return this.$tip.toast(res.msg)
					res.data.detailPicture = res.data.detailPicture.split(',')
					res.data.whitePicture = res.data.whitePicture.split(',')
					this.goodDetail = res.data
					console.log(this.goodDetail)
					this.showCart()
				})
			},
			// 遍历购物车给商品count赋值
			showCart(){
				Vue.set(this.goodDetail, 'count', 0);
				this.carList.forEach(car =>{
					if(this.goodDetail.id == car.productId){
						this.goodDetail.count = car.count
					}
				})
			},
			// 购物车数据处理
			handelCart(item){
				this.carList = this.$store.state.carList
				if(this.goodDetail.id = item.id){
					this.goodDetail.count = item.count
				}
			},
			// 清空购物车
			delAll(){
				this.carList = []
				this.goodDetail.count = 0
			},
			bannerChange: function(e) {
				this.bannerIndex = e.detail.current;
			},
			previewImage: function(e) {
				let index = e.currentTarget.dataset.index;
				uni.previewImage({
					current: this.banner[index],
					urls: this.banner
				});
			},
			// 视频播放
			playRadio() {
				this.vedioShow = true
				let vedioContext = uni.createVideoContext("myVideo",this)
				vedioContext.play() // 开始播放
			},
			// 退出/暂停视频
			outRadio() {
				this.vedioShow = false
				let vedioContext = uni.createVideoContext("myVideo",this)
				vedioContext.pause() // 停止播放
			},
		},
		onPageScroll(e) {
			let scroll = e.scrollTop <= 0 ? 0 : e.scrollTop;
			let opcity = scroll / 750;
			if (this.opcity >= 1 && opcity >= 1) {
				return;
			}
			this.opcity = opcity;
			this.iconOpcity = 0.5 * (1 - opcity < 0 ? 0 : 1 - opcity);
		}
	}
</script>


<style scoped lang="scss">
.vedio-box {
	width: 750rpx;
	height: 750rpx;
	background-color: #000;
	position: absolute;
	top: 0;
}
video {
		width: 750rpx;
		height: 640rpx;
	}
.playBtn,.outBtn {
	width: 180rpx;
	line-height: 60rpx;
	height: 60rpx;
	border-radius: 60rpx;
	background-color: rgba(255,255,255,0.5);
	text-align: center;
	position: absolute;
	top: 660rpx;
	left: 50%;
	margin-left: -100rpx;
}
.playBtn {
	.round {
		margin-right: 30rpx;
		margin-left: 8rpx;
		width: 50rpx;
		height: 50rpx;
		background-color: #F22222;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
	.tui-opcity .tui-menu-text,
	.tui-opcity .tui-badge-box {
		opacity: 0.5;
		transition: opacity 0.2s ease-in-out;
	}
	.tui-padding {
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.tui-ptop {
		padding-top: 20px;
	}
	/* #ifdef H5 */
	.tui-ptop {
		padding-top: 44px;
	}
	
	/* #endif */
	
	.container {
		padding-bottom: 110rpx;
	}
	/* nav导航 */
	.tui-header-box {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 995;
	}
	.tui-header {
		width: 100%;
		font-size: 18px;
		line-height: 88px;
		font-weight: 500;
		height: 32px;
		margin-top: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tui-header-icon {
		position: fixed;
		top: 0;
		/* #ifdef H5 */
		top: 10px;
		/* #endif */
		left: 10px;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		height: 32px;
		transform: translateZ(0);
		z-index: 9999;
	}
	.tui-header-icon .tui-badge {
		background: #e41f19 !important;
		position: absolute;
		right: -4px;
	}
	.tui-header-right{
		position: fixed;
		top: 0;
		right: 10px;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		height: 32px;
		transform: translateZ(0);
		z-index: 9999;
	}
	.tui-icon-ml {
		margin-left: 20rpx;
	}
	.tui-icon-box {
		position: relative;
		height: 30px !important;
		width: 30px !important;
		padding: 6px !important;
	
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		.icon{
			font-size: 20px;
		}
		
	}
	/* banner */
	.tui-banner-swiper {
		position: relative;
	}
	
	.tui-banner-tag {
		position: absolute;
		color: #fff;
		bottom: 0;
		width: 100%;
		.banner-tag-in{
			display: flex;
			justify-content: flex-end;
			margin: 0 30upx 30upx 0;
			.banner-tag{
				background-color: rgba($color: #000000, $alpha: 0.5);
				padding: 20upx 0;
				width: 100upx;
				text-align: center;
			}
		}
	}
	.tui-slide-image {
		width: 100%;
		display: block;
	}
	
	// 标题内容模块
	.pro-detail{
		.price-blue{
			background: linear-gradient(to right,#2ba4f7,#fff);
			.price{
				padding: 0 28upx;
			}
		}
		.banner-pricebox{
			background: url(../../../static/goods/price_bg.png);
			background-repeat: no-repeat;
			background-position: top center;
			background-size: cover;
			align-items: center;
			justify-content: center;
			color: $main-color;
			width: 50%;
			height: 130upx;
			padding-left: 76upx;
			.line-through{
				margin-top: 15rpx;
				margin-left: 20rpx;
			}
		}
		.por-list{
			padding:20upx;
			margin-bottom: 12upx;
			background-color: #FFFFFF;
			.pro-pricebox{
				.original-price{
					margin-right: 10upx;
					color: #F22222;
					& > text{
						font-size: 20upx;
					}
					.tui-price{
						font-size: 42upx !important;
						font-weight: bold;
					}
				}
				.pro-people{
					color: $main-color;
				}
			}
			.pro-titbox{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				box-sizing: border-box;
				.pro-title{
					color: #080808;
					font-size: 30upx;
					font-weight: bold;
					word-break: break-all;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					width: 80%;
				}
				button.pro-button{
					width: 95upx;
					padding:9upx  0;
					background-color: #e7fcfa;
					color: $main-color;
					border-top-left-radius:50upx ;
					border-bottom-left-radius:50upx ;
					text-align: center;
					position: absolute;
					right: 0;
					font-size: 28rpx;
					line-height: 1;
				}
				button.pro-button::after{
					border: 0  none !important;
					box-shadow: none !important;
				}
			}
			.iconfanhui-right{
				color:$black-color;
				font-size: 35upx;
				padding-left: 5upx;
			}
			.title{
				font-size: 34upx;
				font-weight: bold;
			}
			.pro-vip-del{
				color: $main-color;
				.icon{
					color: $main-color;
				}
			}
		}
		.por-specs{
			padding-right: 42upx;
			font-size: 24upx;
			align-items: flex-start;
			& > text:first-child{
				padding-right: 20upx;
				font-weight: bold;
				color: #000;
			}
			.text-glod{
				color: #c2a337;
			}
			.flex1{
				width: 70%;
				flex: 1;
			}
		}
		
	}
	.por-list >view:not(:last-child){
		margin-bottom: 27upx;
	}
	/* 详情 */
	.product-details{
		.details-title{
			padding: 30upx 0;
			& > text{
				font-size: 30upx;
				margin: 0 40upx;
			}
			& > view{
				width: 32%;
				height: 2upx;
				background-color: #EEEEEE;
			} 
		}
		image{
			width: 100vw;
			display: block;
		}
	}
	// 加入购物车
	.food-btm {
		flex: 1;
		position: relative;
	}
	.swiperheight{
		height: 100vw;
	}
	.sku-box{
		border-radius: 10rpx;
		overflow: hidden;
	}
	.sku{
		height: 90rpx;
		border-bottom: 1px solid #fff;
		text{
			padding: 0 18rpx;
			line-height: 90rpx;
		}
		.bg-gray{
			width: 20%;
		}
	}
	.sku:last-child{
		border: none;
	}
	.sku-detail{
		flex: 1;
		background-color: #f8f8f8;
		
	}
</style>
